<template>
  <div>
    <n-drawer v-model:show="showModal" width="100%" placement="right">
      <n-drawer-content title="校验密码">
          <div class="pass-check" @keydown.enter="checkPass">
            <n-icon size="30" color="#808695" style="margin-bottom:10px;">
              <LockClosedOutline />
            </n-icon>
            <div class="title" style="margin-bottom:40px;">密码认证</div>
            <div class="desc">请输入您的密码</div>
            <n-input
              :autofocus="true"
              v-model:value="password"
              size="large"
              show-password-toggle
              minlength="8"
              placeholder="请输入您的密码"
              type="password"
              style="width:300px;margin-bottom:40px;"
            />
            <div style="margin-bottom:60px;">
              <n-button size="large" @click="showModal=false" style="margin-right:20px;">取消</n-button>
              <n-button
                :loading="loading"
                :disabled="password.length<8"
                @click="checkPass"
                type="primary"
                size="large"
              >提交</n-button>
            </div>
          </div>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script>
import {defineComponent,ref} from 'vue'
import {LockClosedOutline} from '@vicons/ionicons5';
import {checkPassword} from "@/api/system/user";
import {useMessage} from 'naive-ui'
export default defineComponent({
  name: "check-password",
  components:{
    LockClosedOutline
  },
  setup(props,context){
    const message=useMessage();
    const showModal=ref(false);
    const password=ref('');
    const loading=ref(false);
    const checkPass=()=>{
      checkPassword({password:password.value}).then(res=>{
        if(res){
          showModal.value=false;
          context.emit('on-success');
        }else{
          message.error('密码不正确');
        }
      })
    };
    const show = () => {
      showModal.value=true;
      password.value='';
    }
    return {
      showModal,
      checkPass,
      password,
      loading
    }
  }
})
</script>

<style lang="less">
.pass-check{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  .title{
    font-weight: 600;
    color: #2f3033;
    font-size: 16px;
  }
  .desc{
    font-size: 14px;
    line-height: 28px;
    margin: 15px 0;
  }
}
</style>

